import {View, Text, Image} from "@tarojs/components"
import Taro from "@tarojs/taro"
import "./index.scss"
import {Avatar, Button} from "@nutui/nutui-react-taro";
import {useState} from "react";
import {defaultUser, UserModel, UserType} from "@/shared/services/model/user";
import MyListItem from "@/components/MyListItem"
import balanceIcon from '@/assets/balance.png'
import orderIcon from '@/assets/icon_order.png'
import couponIcon from '@/assets/icon_coupon.png'
import myIcon from '@/assets/icon_my.png'
import aboutIcon from '@/assets/icon_about.png'
import iconManager from '@/assets/icon_manager.png'
import {loadingService} from "@/shared/utils/loading";
import userService from "@/shared/services/user/user.service";

export default function ProfilePage() {

  const [user, setUser] = useState<UserModel>(defaultUser)

  Taro.useDidShow(async () => {
      let result = await userService.userInfo({})

    if(result.code == 0){
      setUser(result.data)
    }
  })

  // 可以在任何地方调用，不需要Button
  const handleGetUserInfo = async (res) => {
      console.log(res,'用户信息:')

    loadingService.show({})

  }

  // 跳转到管理后台页面
  const toAdminPage = () => {
    Taro.navigateTo({
      url: '/pages/admin/index' // 根据你的实际路由路径修改
    })
  }

  // 跳转到个人资料页面
  const toUserInfoPage = () => {
    Taro.navigateTo({
      url: '/pages/userinfo/index' // 根据你的实际路由路径修改
    })
  }

  // 跳转到订单页面
  const toOrderPage = () => {
    Taro.navigateTo({
      url: '/pages/order/index' // 根据你的实际路由路径修改
    })
  }

  // 跳转到优惠券页面
  const toCouponPage = () => {
    Taro.navigateTo({
      url: '/pages/user/coupon/index' // 根据你的实际路由路径修改
    })
  }

  const toQrCode = () => {
    Taro.navigateTo({
      url: '/pages/user/qrcode/index' // 根据你的实际路由路径修改
    })
  }

  return (
    <View className="profile">
      <View className="backgroundArea">
        <Image className="background" src='https://i.postimg.cc/prVfdbJM/d3233c62e2dd431e422c46812f25c432.png' mode="widthFix"/>
        <View className="userInfo">
          <View className="avatarContainer" >
            <Image className="avatar" src={user.avatar} mode="widthFix"/>
            <View className="userNameInfo">

              {user.id === 0 && <Button className="userNameBtn"
                                        openType="getUserInfo"
                                        onGetUserInfo={handleGetUserInfo}
                                        block={false}
                                        size={"mini"}
                                       >{user.name}</Button>}
              {user.id !== 0 && <Text className="userName">{user.name}</Text>}

              {user.id !== 0 && (
                <Text className="userPhone">{user.phone}</Text>
              )}
            </View>

            <View className="qrcode" onClick={toQrCode}>
              <Image className="qrcodeImage" src={require('@/assets/qrcode.png')} mode="widthFix"/>
              <Text className="qrcodeText">会员码</Text>
            </View>
          </View>
        </View>
      </View>

      <View className="profile-content">
        <MyListItem
          title="余额"
          value={`${user.balance}元`}
          icon={balanceIcon} // 在外部使用 require
          iconSize={20}
          showBottomBorder={true}
        />

        <MyListItem
          title="订单"
          icon={orderIcon} // 在外部使用 require
          iconSize={20}
          onClick={toOrderPage}
          showArrow={true}
          showBottomBorder={true}
        />

        <MyListItem
          title="优惠券"
          value="可用0张"
          onClick={toCouponPage}
          icon={couponIcon} // 在外部使用 require
          showArrow={true}
          showBottomBorder={false}
        />

        <View className="space"></View>

        <MyListItem
          title="个人资料"
          icon={myIcon} // 在外部使用 require
          showArrow={true}
          showBottomBorder={true}
          onClick={toUserInfoPage}
        />

        <MyListItem
          title="关于囍理运"
          icon={aboutIcon} // 在外部使用 require
          showArrow={true}
          showBottomBorder={iconManager}
        />
        {user.userType === UserType.ADMIN && (
          <MyListItem
            title="管理后台"
            icon={iconManager} // 如果没有管理员图标就用关于图标
            showArrow={true}
            showBottomBorder={false}
            onClick={toAdminPage}
          />
        )}
      </View>
    </View>
  )
}
